<div  ng-controller="UserListCtrl">
    <div class="app-content-body fade-in-up" infinite-scroll='scrollEvent()' infinite-scroll-disabled="isLoad" infinite-scroll-distance="0" >
        <div class="hbox hbox-auto-xs hbox-auto-sm"   >
            <div class="col w-md bg-light dk b-r bg-auto" >
                <div class="wrapper bg-light lter b-b">
                    <div class="input-group">
                        <input type="text" ng-model="searchValue"  ng-keydown="searchUserList($event)"  class="form-control input-sm bg-light no-border rounded padder" placeholder="{{'user.searchUser'|translate}}...">
                              <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm bg-light rounded" ng-click="searchUserList()"><i class="fa fa-search"></i></button>
                              </span>
                    </div>
                </div>
                <div class="wrapper"  >
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info" > <div style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'user.allDepartment'|translate}}</b></div></span>
                        <abn-tree
                                tree-data         = "groups"
                                tree-control      = "groups_tree"
                                on-select         = "group_handler(branch)"
                                initial-selection = "{{selectGroupId}}"
                                expand-level      = "1"
                                icon-collapse       = "fa fa-angle-down"
                                icon-expand    = "fa fa-angle-right"
                        >
                        </abn-tree>
                    </div>
                    <div ng-show="teams.length>0" style="padding-left:5px;margin-bottom: 5px;"  >
                        <span class="text-info"  > <div class="text-info" style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'user.teams'|translate}}</b></div></span>
                        <abn-tree
                                tree-data         = "teams"
                                tree-control      = "teams_tree"
                                on-select         = "teams_handler(branch)"
                                initial-selection = "{{selectGroupId}}"
                                expand-level      = "1"
                                icon-collapse       = "fa fa-angle-down"
                                icon-expand    = "fa fa-angle-right"
                        >
                        </abn-tree>
                    </div>
                    <div ng-show="myGroups.length>0" style="padding-left:5px;margin-bottom: 5px;"  >
                        <span class="text-info"   > <div class="text-info" style="padding-top:10px;padding-bottom:5px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'user.myGroup'|translate}}</b></div></span>
                        <abn-tree
                                tree-data         = "myGroups"
                                tree-control      = "my_groups_tree"
                                on-select         = "my_group_handler(branch)"
                                expand-level      = "1"
                                icon-collapse       = "fa fa-angle-down"
                                icon-expand    = "fa fa-angle-right"
                        >
                        </abn-tree>
                    </div>

                </div>
            </div>
            <div class="col" >
                <div class="wrapper bg-light lter b-b" style="height:60px;">
                    <ul class="breadcrumb" style="display: block;float:left;background:none;">
                        <li><a ui-sref="app.news" ><i class="iconfont icon-xinwen"></i> {{'aside.nav.news'|translate}}</a></li>
                        <li><a ui-sref="app.records" ><i class="iconfont icon-danganliebiao"></i> {{'aside.nav.records'|translate}}</a></li>
                        <li class="active"> {{'user.addressBook'|translate}} </li>
                    </ul>
                    <div class="pull-right m-r-sm " style="margin-top: 8px;" >
                        <span ng-show="group==null&&(searchValue==null||searchValue=='')" >{{'user.allUser'|translate}}</span><span ng-show="searchValue!=null&&searchValue!=''" >{{'common.search'|translate}} {{searchValue}}</span>{{group.name}}  {{'common.general'|translate}} {{totalCount}} {{'user.barUser'|translate}}
                    </div>

                </div>
                <div class=""  >
                    <div class="alert-info ng-binding wrapper" style="border-radius: 2px;" ng-show="group.name!=null" >{{group.name}} , {{'common.from'|translate}}{{group.creatorFirstName}}{{'user.createdIn'|translate}}{{group.created}} , {{'user.member'|translate}} : </div>

                    <div ng-show="users.length==0" style="text-align: center;margin-top: 30px;" ><i class="iconfont  icon-meiyousoudaoxinxi" style="font-size: 23px;" ></i>&nbsp;&nbsp;{{'user.noUser'|translate}}...</div>

                    <ul class="list-group list-group-lg no-radius m-b-none m-t-n-xxs">
                        <li ng-repeat="user in users"  class="list-group-item clearfix b-l-3x b-l-info">
                            <a ui-sref="app.userprofile({user:user.userName})"  class="avatar thumb pull-left m-r">
                                <div class="image" style="background-image: url('/suite/plugins/servlet/getUserAvatar?user={{user.userName}}')"></div>
                            </a>

                            <div class="clear">
                                <div><a ui-sref="app.userprofile({user:user.userName})" class="text-md"><span ng-bind-html="user.firstName"></span></a>&nbsp;<span class="label bg-light m-l-sm" >{{user.customField2}}</span>&nbsp;&nbsp;&nbsp;<span ><i class="fa fa-phone"></i> {{user.phoneOffice}}</span>&nbsp;&nbsp;&nbsp;<span ><i class="glyphicon glyphicon-envelope"></i> <span ng-bind-html="user.email"></span></span></div>
                                <div class="text-ellipsis m-t-xs"  ><i class="fa fa-map-marker"></i> {{user.address1}}
                                    <a href="" class="text-info m-xs ng-click-active" ui-sref="app.news({docId:'-1',userId:user.userName})" >
                                    <i class="icon-bubbles  ng-binding"> 发送消息</i>
                                </a></div>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </div>

</div>